<template>

  <div class="!w-full">
    <a-card>
       <div class="!flex w-full justify-between ">
        <ItemCard color="#41B349" name="集群" :num=1></ItemCard>
        <ItemCard color="#10AEC2" name="客户端" :num=20></ItemCard>
        <ItemCard color="#FCC307" name="主题数" :num=100></ItemCard>
        <ItemCard color="#EE3F4D" name="消息数" :num=10000></ItemCard>
        <ItemCard color="#806D9E"></ItemCard>
      </div> 
    </a-card>

    <a-card
    class="!mt-5 w-full"
    :tab-list="tabListNoTitle"
    :active-tab-key="noTitleKey"
    @tabChange="key => onTabChange(key, 'noTitleKey')"
  >
    <div  class="!flex gap-5">
      <div class="!flex-[0_1_70%]">
        <WsChart  height="500px" :option="reactiveOrderOption"/>
      </div> 

      <div class="flex-1">
        <WsChart  height="500px" :option="reactiveRankingOption"/>
      </div>
    </div>
     
    <template #tabBarExtraContent>
      <div style="display: flex;gap:10px">
        <a-button>今日</a-button>
        <a-button>本周</a-button>
        <a-button >本月</a-button>
        <a-button>本年</a-button>
        <a-range-picker  :format="dateFormat" />
      </div>
    </template>
  </a-card>

  
  </div>
</template>

<script setup name="Home">
import ItemCard from "./components/ItemCard.vue"
import WsChart from '@/components/WsChart.vue';
//折线图
import orderOption from '@/utils/echart/index/order';
import rankingOption from '@/utils/echart/index/ranking';
import {statistics} from '@/api/influxdb'
const dateFormat = 'YYYY/MM/DD';
// const value4=ref([dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]);
const tabListNoTitle = [{
      key: 'user',
      tab: '用户',
    }, {
      key: 'order',
      tab: '订单',
    }];
 
    
const reactiveOrderOption = reactive(orderOption)
const reactiveRankingOption = reactive(rankingOption)
onMounted(async()=>{
    var res = await statistics();
    let{data} = res;
    reactiveOrderOption.series[0].data =data;

})
const onTabChange = (value, type) => {
      console.log(value, type);
      if (type === 'key') {
        key.value = value;
      } else if (type === 'noTitleKey') {
        noTitleKey.value = value;
      }
    };
</script>
<style scoped>


</style>